<template>
  <div id="app" class="ordering bg-gray-100 min-h-screen py-10">
    <div class="container mx-auto px-4">
      <h1 class="text-4xl font-bold text-center text-gray-800 mb-8">
        葛洪 - 东晋道教学者、炼丹家、医药学家
      </h1>
      <div class="bg-white p-8 rounded-lg shadow-md mb-8">
        <h2 class="text-2xl font-bold text-gray-800 mb-4">葛洪简介</h2>
        <p class="text-gray-700 text-lg leading-relaxed mb-4">
          葛洪（283年～343年），字稚川，自号抱朴子，丹阳郡句容（今江苏省句容市）人，东晋道教学者、炼丹家、医药学家。他是三国方士葛玄之侄孙，世称小仙翁。葛洪一生著述颇丰，在道教理论、炼丹术、医药学等多个领域都有卓越贡献。
        </p>
      </div>
      <div class="bg-white p-8 rounded-lg shadow-md mb-8">
        <h2 class="text-2xl font-bold text-gray-800 mb-4">葛洪生平时间轴</h2>
        <div class="timeline">
          <div class="timeline-container left">
            <div class="timeline-content">
              <h3>283年</h3>
              <p>葛洪出生于丹阳句容。</p>
            </div>
          </div>
          <div class="timeline-container right">
            <div class="timeline-content">
              <h3>少年时期</h3>
              <p>勤奋好学，广览经史百家，尤其对神仙导养之法感兴趣。</p>
            </div>
          </div>
          <div class="timeline-container left">
            <div class="timeline-content">
              <h3>师从郑隐</h3>
              <p>跟随郑隐学习炼丹秘术，积累了丰富的炼丹知识。</p>
            </div>
          </div>
          <div class="timeline-container right">
            <div class="timeline-content">
              <h3>参与军事</h3>
              <p>因镇压石冰起义有功，被授伏波将军。</p>
            </div>
          </div>
          <div class="timeline-container left">
            <div class="timeline-content">
              <h3>隐居著述</h3>
              <p>晚年隐居罗浮山，潜心炼丹、著书，完成了《抱朴子》《肘后备急方》等重要著作。</p>
            </div>
          </div>
          <div class="timeline-container right">
            <div class="timeline-content">
              <h3>343年</h3>
              <p>葛洪去世，享年六十一岁。</p>
            </div>
          </div>
        </div>
      </div>
      <div class="bg-white p-8 rounded-lg shadow-md mb-8">
        <h2 class="text-2xl font-bold text-gray-800 mb-4">葛洪主要著作影响力统计</h2>
        <div id="bookChart" class="w-full h-64"></div>
      </div>
      <div class="bg-white p-8 rounded-lg shadow-md">
        <h2 class="text-2xl font-bold text-gray-800 mb-4">葛洪相关图片展示</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          <img src="https://img2.baidu.com/it/u=2284900631,3672843227&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=648" alt="葛洪相关图片1" class="w-full h-auto rounded-md">
          <img src="https://img0.baidu.com/it/u=3727521829,1565111107&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=753" alt="葛洪相关图片2" class="w-full h-auto rounded-md">
          <img src="https://img1.baidu.com/it/u=1897211738,3350140451&fm=253&fmt=auto&app=138&f=JPEG?w=307&h=400" alt="葛洪相关图片3" class="w-full h-auto rounded-md">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from '@/assets/echarts.min.js';

export default {
  data() {
    return {
      bookData: {
        xAxisData: ['《抱朴子》', '《肘后备急方》', '其他著作'],
        seriesData: [80, 90, 30]
      }
    };
  },
  mounted() {
    this.$nextTick(() => {
      const myChart = echarts.init(document.getElementById('bookChart'));
      const option = {
        color: ['#6699FF', '#FF9966', '#99CC99'],
        xAxis: {
          type: 'category',
          data: this.bookData.xAxisData,
          axisTick: {
            alignWithLabel: true
          },
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          },
          axisLabel: {
            fontSize: 14,
            fontWeight: 'bold',
            color: '#333'
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#f0f0f0'
            }
          },
          axisLabel: {
            fontSize: 14,
            fontWeight: 'bold',
            color: '#333'
          }
        },
        series: [
          {
            data: this.bookData.seriesData,
            type: 'bar',
            barWidth: '40%',
            itemStyle: {
              borderRadius: 5,
              shadowColor: 'rgba(0, 0, 0, 0.3)',
              shadowBlur: 5,
              shadowOffsetX: 2,
              shadowOffsetY: 2
            },
            label: {
              show: true,
              position: 'top',
              fontSize: 14,
              fontWeight: 'bold',
              color: '#333'
            }
          }
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          backgroundColor: 'rgba(0, 0, 0, 0.7)',
          textStyle: {
            color: '#fff'
          }
        }
      };
      myChart.setOption(option);
    });
  }
};
</script>

<style scoped>
.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: #333;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

.timeline-container {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

.timeline-container::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -13px;
  background-color: white;
  border: 4px solid #FF9F55;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

.left {
  left: 0;
}

.right {
  left: 50%;
}

.left::before {
  content: ' ';
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent white;
}

.right::before {
  content: ' ';
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}

.right::after {
  left: -13px;
}

.timeline-content {
  padding: 20px 30px;
  background-color: white;
  position: relative;
  border-radius: 6px;
}

@media screen and (max-width: 600px) {
 .timeline::after {
    left: 31px;
  }

 .timeline-container {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }

 .timeline-container::before {
    left: 60px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
  }

 .left::after,
 .right::after {
    left: 18px;
  }

 .right {
    left: 0%;
  }
}
</style>